<template>
  <div class="page-container">
    <div>
      <!--工具栏-->
      <div class="toolbar">
        <el-form :inline="true" :model="searchFilters" :size="size" ref="searchFilters">
          <el-row class="search-input">
            <el-form-item prop="rangeCode" label="供应商范围编码：">
              <el-input v-model="searchFilters.rangeCode" placeholder="供应商范围编码"></el-input>
            </el-form-item>
            <el-form-item prop="rangeName" label="供应商范围名称：">
              <el-input v-model="searchFilters.rangeName" placeholder="供应商范围名称"></el-input>
            </el-form-item>
            <el-form-item prop="productCode" label="商品编码：">
              <el-input v-model="searchFilters.productCode" placeholder="商品编码"></el-input>
            </el-form-item>
            <el-form-item prop="productName" label="商品名称：">
              <el-input v-model="searchFilters.productName" placeholder="商品名称"></el-input>
            </el-form-item>
          </el-row>
          <el-row class="search-button">
            <el-form-item>
              <kt-button
                icon="fa fa-search"
                :label="$t('action.search')"
                type="primary"
                @click="queryRangeProduct()"
              />
            </el-form-item>
            <!-- <el-form-item>
            <kt-button
              icon="fa fa-search"
              label="查询并下载"
              type="primary"
              @click="findPage(null)"
            />
            </el-form-item>-->
            <el-form-item>
              <kt-button
                icon="fa fa-refresh"
                :label="$t('action.reset')"
                type="primary"
                @click="resetForm('searchFilters')"
              />
            </el-form-item>
            <!-- <el-form-item>
              <el-button type="primary" icon="el-icon-download">批量下载</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-upload2">批量上传</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-download">模板下载</el-button>
            </el-form-item>-->
          </el-row>
        </el-form>
      </div>
      <!--表格内容栏-->
      <div class="table-wrap">
        <el-table
          :data="rangeProductList"
          v-loading="rangeProductListLoading"
          style="width:100%;"
          :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}"
        >
          <el-table-column label="ID" prop="id" align="center"></el-table-column>
          <el-table-column label="供应商范围编码" prop="rangeCode" align="center"></el-table-column>
          <el-table-column label="供应范围名称" prop="rangeName" align="center"></el-table-column>
          <el-table-column label="商品名称" prop="productName" align="center"></el-table-column>
          <el-table-column label="商品编码" prop="productCode" align="center"></el-table-column>
          <el-table-column label="商品成本价" prop="costPrice" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.costPrice" @blur="updateCostPrice(scope.row,scope.$index)" type="text" placeholder="请输入商品成本价"/>
            </template>
          </el-table-column>
          <el-table-column label="创建日期" prop="createTime" align="center"></el-table-column>
        </el-table>
        <!--分页栏-->
        <div class="toolbar" style="padding:10px;">
          <el-pagination
            layout="total, prev, pager, next, jumper,sizes"
            @current-change="refreshRangeProductPage"
            :current-page="searchFilters.pageNum"
            :page-size="searchFilters.pageSize"
            :total="rangeProductTotal"
            style="float:right;"
            :page-sizes="[10, 20, 30, 40]"
            @size-change="handleRangeProductSizeChange"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import KtButton from "@/views/Core/KtButton";

export default {
  components: {
    KtButton,
  },
  data() {
    return {
      size: "small",
      searchFilters: {
        pageNum: 1,
        pageSize: 10,
        rangeCode:null,
        rangeName:null,
        productCode:null,
        productName:null,
      },

      rangeProductList:[],
      rangeProductListLoading:false,
      rangeProductTotal:0,
    };
  },
  methods: {
    // 获取分页数据
    queryRangeProduct: function (data) {
      this.searchFilters.status = 1;
      this.utils.request.querySupplierRangeProductList(
        this.searchFilters,
        (res) => {
          if (res.code == "0000" && res.data && res.data.rows && res.data.rows.length > 0) {
            this.rangeProductList = res.data.rows;
            this.rangeProductList.forEach(item => {
              if(!item.costPrice || item.costPrice == 0){
                item.costPrice = null;
              }
            });
            this.rangeProductTotal = res.data.total;
          } else {
            this.rangeProductList = [];
            this.rangeProductTotal = 0;
          }
          this.rangeProductListLoading = false;
        }
      );
    },
    // 每页数据刷新
    refreshRangeProductPage: function (pageNum) {
      this.searchFilters.pageNum = pageNum;
      this.queryRangeProduct();
    },
    // 每页条数刷新
    handleRangeProductSizeChange: function (pageSize) {
      this.searchFilters.pageSize = pageSize;
      this.queryRangeProduct();
    },
    resetForm(formName) {
      if (this.$refs[formName] != undefined) {
        this.$refs[formName].resetFields();
        this.queryRangeProduct();
      }
    },
    //更改商品成本价
    updateCostPrice(row,index){
      let param = {
        id:row.id,
        costPrice:row.costPrice
      };
      let that = this;
      that.utils.request.updateSupplierRangeProduct(param,res =>{
        if(res.code == '0000'){
          that.queryRangeProduct();
          that.$message({ message: "操作成功！", type: "success" });
        }else{
          that.rangeProductList[index].costPrice = null;
          that.$message({ message: "操作失败！" ,type: "error" });
        }
      });
    }
  },
  mounted() {
    this.queryRangeProduct();
  },
};
</script>

<style scoped lang="scss">
</style>
